{% extends "base.html" %}

{% block main %}
{% if pets %}
        <div class="featureRow clearfix">
            <div class="featurePets clearfix">
                {% for pet in pets %}
                <div class="featuredPet floatLeft clearfix">
                    <div class="petImage">
                        <img src="{{ pet.photos.1.x }}" alt="{{ pet.name }}" {% cropimg pet.photos.1.info.1 pet.photos.1.info.2 270 228 %} />
                    </div><!-- close petImage -->
                    <div class="petInfo">
                        <div class="petName">{{ pet.name }}</div>
                        <div class="petDetails">
                            <!-- <h3>Details:</h3> -->
                            <ul>
                            	{% if pet.animal %}<li class="animalType">{{ pet.animal }}</li>{% endif %}
                            	{% if pet.breeds %}{% for breed in pet.breeds %}<li class="animalBreed">{{ breed }}</li>{% endfor %}{% endif %}
                            	{% if pet.sex %}<li class="animalSex">{{ pet.sex }}</li>{% endif %}
                            	{% if pet.age %}<li class="animalAge">{{ pet.age }}</li>{% endif %}
                            	<!-- <li class="animalOther">Great with kids!</li> -->
                            </ul>
                        </div><!-- close petDetails -->
                        <div class="adoptButton"><a class="btnAction" href="/adoptions-{{ pet.animal|slugify }}-{{ pet.name|slugify }}-{{ pet.id }}.html">Read more!</a></div>
                    </div><!-- close petInfo -->
                </div><!-- close feauturedPet -->
                {% endfor %}
                <div class="otherFeaturedPets floatRight">
                    {% for pet in pets %}
                    <div class="feature {% if forloop.first %}current{% endif %}{% if forloop.last %}last{% endif %}">
                        <div class="featureArrow"></div>
                        <div class="featThumb">
                        	<div class="crop">
                            	<img src="{{ pet.photos.1.x }}" alt="{{ pet.name }}" {% cropimg pet.photos.1.info.1 pet.photos.1.info.2 87 54 %} />
                            </div>
                        </div><!-- close featThumb -->
                        <div class="featName">
                        {{ pet.name }}
                        </div><!-- close featName -->
                    </div><!-- close feature -->
                    {% endfor %}
                </div><!-- close otherFeaturedPets -->
            </div><!-- close featurePets -->
            <div class="featureAd">
                <img src="https://www.google.com/adsense/static/en_GB/images/300x250_img.jpg" alt="AD" />
            </div><!-- close featurePets -->
        </div><!-- close featureRow -->
{% endif %}
{% if site_news %}
        <div class="contentRow clearfix">
            <div class="newsEventsRow floatLeft">
                <h2>News &amp; Events</h2>
                {{ site_news|safe|linebreaks }}
            </div><!-- close newsEventsRow -->
        	<div class="sidebar floatRight">
                <div class="module">
    				<script src="http://widgets.twimg.com/j/2/widget.js"></script>
    				<script>
    				new TWTR.Widget({
    				  version: 2,
    				  type: 'profile',
    				  rpp: 5,
    				  interval: 5000,
    				  width: 'auto',
    				  height: 300,
    				  theme: {
    				    shell: {
    				      background: '#dd5f24',
    				      color: '#ffffff'
    				    },
    				    tweets: {
    				      background: '#ffffff',
    				      color: '#000000',
    				      links: '#dd5f24'
    				    }
    				  },
    				  features: {
    				    scrollbar: true,
    				    loop: false,
    				    live: true,
    				    hashtags: true,
    				    timestamp: true,
    				    avatars: false,
    				    behavior: 'all'
    				  }
    				}).render().setUser('{{ shelter_twitter_user }}').start();
    				</script>
    			</div>
    	        <div class="module">
    		        <iframe src="http://www.facebook.com/plugins/likebox.php?href={{ shelter_facebook|urlencode }}&amp;width=302&amp;colorscheme=light&amp;show_faces=true&amp;stream=false&amp;header=true&amp;height=360" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:302px; height:370px;" allowTransparency="true"></iframe>
    			</div>
            </div><!-- close sidebar -->
        </div>
{% endif %}
        <div class="otherItemsRow clearfix">
            <div class="donateNowBox">
            	<h3>Donations</h3>
				<img src="images/img_donate.jpg" alt="Donate Now!" />
            	<a href="donations.html" class="text">Learn how you can help out!</a>
            </div><!-- close donateNowBox -->
            <div class="aboutUsBox">
            	<h3>About Us</h3>
            	<img src="images/img_aboutus.jpg" alt="Find out more about us!" />
            	<a href="about_us.html" class="text">Learn more about what we do!</a>
            </div><!-- close aboutUsBox -->
        </div><!-- close otherItemsRow -->
{% endblock main %}

{% block javascript %}
{{ block.super }}
    <script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>
    <script type="text/javascript" src="js/featureBox.js"></script>
{% endblock javascript %}

